<template>
  <div id="specs_app">
    <div class="control">
      <el-button type="primary" plain round @click="isShow.flag=true">新增</el-button>
    </div>
    <el-table :data="specsList" style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="specsname" label="规格名称"> </el-table-column>
      <el-table-column prop="attrs" label="规格参数"> 
         <template v-slot="props">
            <el-button type="success" size="mini" round plain v-for="(p,i) in props.row.attrs" :key="i">{{ p }}</el-button>
         </template>  
      </el-table-column>
      <el-table-column prop="status" label="规格状态"> 
          <template v-slot="props">
            <el-button type="success" size="mini" round plain v-if="props.row.status===1">正常</el-button>
            <el-button type="warning" size="mini" round plain v-else>禁用</el-button>
         </template> 
      </el-table-column>
      <el-table-column label="操作">
         <template v-slot="props">
            <el-button type="primary" size="mini" round plain @click="edit_specs(props.row)">编辑</el-button>
            <el-button type="danger" size="mini" round plain @click="del_specs(props.row.id)">删除</el-button>
         </template> 
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="count">
    </el-pagination>
    <Dialog :isShow="isShow" @reload="reload" ref="dialog_ref"/>
    
  </div>
</template>

<script>
import Dialog from '../components/AndSpecs.vue'
import { mapActions, mapState } from 'vuex';
export default {
  data(){
    return {
      isShow: {flag: false},
      pageintor: {page: 1,size: 30}
    } 
  },
  
  computed:{
    ...mapState("spec_model",["specsList","count"])
  },
  methods:{
    del_specs(id){
       this.$delMessage(
         ()=>{
           this.$axios.post('/specsdelete',{id}).then(
              res=>{
                if(res.code===200){
                  this.reload()
                }
              }
            )
         }
       )
    },
        
    edit_specs(obj){
      //打开模态框
      this.isShow.flag = true
      //设置数据
      this.$refs.dialog_ref.setFormData(obj)
    },
    reload(){
      this.specsCountActions()
      this.specsListActions(this.pageintor)
    },
    ...mapActions("spec_model",["specsCountActions","specsListActions"])
  },
  created(){
    this.specsCountActions()
    this.specsListActions(this.pageintor)
  },
  components:{
    Dialog
  }
};
</script>

<style>
</style>